<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>今天天气狠{{info}}</h1>
      <button @click="isHot=!isHot">切换天气</button>
      <br />
      <hr />
      <p>a:{{numbers.a}}</p>
      <button @click="numbers.a++">点击a+1</button>
      <br />
      <p>b:{{numbers.b}}</p>
      <button @click="numbers.b++">点击b+1</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isHot: true,
            numbers: {
              a: 1,
              b: 2,
            },
          };
        },
        computed: {
          info: function () {
            return this.isHot ? "炎热" : "清凉";
          },
        },
        // 监视方式1
        watch: {
          // 多层结构监视
          "numbers.a": {
            immediate: true, //初始化的时候就执行一次handler
            handler(newvalue, oldvalue) {
              console.log(
                "a被修改了,新的值是：" + newvalue + "旧的值是：" + oldvalue
              );
            },
          },
          numbers: {
            deep: true,
            handler(newvalue, oldvalue) {
              console.log("numbers被改变了");
            },
          },
          //   简写形式
          //   "numbers.b": function (newvalue, oldvalue) {
          //     console.log(
          //       "b被修改了,新的值是：" + newvalue + "旧的值是：" + oldvalue
          //     );
          //   },
        },
      });
      //   监视方式2
      //   参数1：需要被监控的属性  使用 ' ' 括起来   参数2：watch 配置
      //   vm.$watch("isHot", {
      //     immediate: true,
      //     handler(newvalue, oldvalue) {
      //       console.log(
      //         "isHot被修改了,新的值是：" + newvalue + "旧的值是：" + oldvalue
      //       );
      //     },
      //   });

      //   简写形式
      vm.$watch("numbers.b", function (newvalue, oldvalue) {
        console.log(
          "b被修改了,新的值是：" + newvalue + "旧的值是：" + oldvalue
        );
      });
    </script>
  </body>
</html>
